<template>
  <el-dialog
    :visible.sync="$attrs.visable"
    width="1000px"
    :before-close="handleClose"
    append-to-body
    title="新建群聊"
    :close-on-click-modal="false"
  >
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="180px">
      <el-form-item label="群名称：" prop="groupname">
        <el-input v-model="form.groupname" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="选择需要添加的联系人：" prop="name">
        <el-button icon="el-icon-plus" size="small" class="btncreate mr-12" @click="handleOpenUser">我的客户</el-button>
        <el-button icon="el-icon-plus" size="small" class="btncreate" @click="handleOpenWxUser">企业成员</el-button>
      </el-form-item>
      <div class="flex flexwrap userbox">
        <div v-for="(item,index) in 50" :key="index" class="flex aligncenter useritem">
          <img src="" alt="" class="useravatar mr-8" />
          <div class="nickname f-14 pr-10">用户名称</div>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span>

    <!-- 我的客户 -->
    <select-user v-if="openuser" :visable='openuser' @close='handleCloseUser' />
    <!-- 企业成员 -->
    <ewechat-user v-if="openwxuser" :visable='openwxuser' @close='handleCloseWxUser' />
  </el-dialog>
</template>

<script>
import SelectUser from '@/components/UserGroupComp/SelectUser.vue'
import EwechatUser from '@/components/UserGroupComp/EwechatUser.vue'
export default {
  data() {
    return {
      form: {
        groupname: "",
      },
      rules: {
        groupname: [{ required: true, message: "请输入群聊名称", trigger: "blur" }],
      },
      openuser:false,
      openwxuser:false
    };
  },
  components:{
    SelectUser,
    EwechatUser
  },
  methods: {
    handleClose() {
      this.$emit("close"); //关闭弹窗;
    },

    handleSubmit() {},

    handleOpenUser(){
      this.openuser = true
    },

    handleCloseUser(){
      this.openuser = false
    },

    handleOpenWxUser(){
      this.openwxuser = true
    },

    handleCloseWxUser(){
      this.openwxuser = false
    }

  },
};
</script>
<style lang="scss" scoped>
.userbox {
  min-height: 300px;
  max-height: 450px;
  overflow-y: auto;
}
.useritem {
  padding: 0 10px;
  height: 62px;
  width: 180px;
  border: 1px solid #eee;
  margin-right: 8px;
  margin-bottom: 8px;
}
.nickname{
  width: 108px;
}
</style>